<template>
  <view class="search">
    <!-- 搜索组件 -->
    <u-search
      placeholder="输入商品名"
      v-model="keyword"
      :action-style="{
        backgroundColor: '#ea4350',
        color: '#fff',
        height: '64rpx',
        lineHeight: '64rpx',
        borderRadius: '10rpx',
      }"
      @custom="handleSearch"
    ></u-search>

    <!-- 列表显示 -- 复用商品列表的布局结构 -->
    <view class="search_list u-m-t-10">
        <!-- 点击可以跳转到商品详情页面 -->
        <navigator v-for="item in goods" :key="item.goods_id" :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`">
            <!-- 左边的图片 -->
            <view class="goods-img-wrap">
                <u-image width="191" height="191" :src="item.goods_small_logo || 'https://img2.baidu.com/it/u=1800023025,2148097835&fm=253&fmt=auto&app=138&f=JPEG?w=675&h=500'"></u-image>
            </view>
            <!-- 右边的内容 -->
            <view class="goods-info-wrap">
                <!-- 商品名称 -->
                <view class="goods_name u-line-2">{{item.goods_name}}</view>
                <!-- 商品价格 -->
                <view class="goods_price">￥{{item.goods_price}}</view>
            </view>
        </navigator>
    </view>
  </view>
</template>

<script>
export default {
    data(){
        return{
            // 与搜索框双向绑定的数据(获取输入框的数据)
            keyword:'',
            // 商品列表
            goods:'',
        }
    },
    
    methods:{
        // 点击搜索按钮
        handleSearch(){
            // 根据关键字来搜索商品
            // console.log(this.keyword);
            this.getGoodsList(this.keyword)
        },

        // 第一种搜索方式 --- 直接全部显示商品信息--类似商品列表页面
       async getGoodsList(query){
            const params = {
                query: query,
                cid:'',
                pagenum:1,
                pagesize:20
            }
            // 调用的是商品列表的接口
            const result = await this.$u.get('/goods/search', params)
            // console.log(result);
            this.goods = result.message.goods
        }
    }
}
</script>

<style lang="scss">
.search {
  padding: 15rpx;
}
.search_list {
  navigator {
    display: flex;
    .goods-img-wrap {
      flex: 1;
      padding: 15rpx;
    }
    .goods-info-wrap {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name {
      }
      .goods_price {
        color: red;
        font-size: 30rpx;
      }
    }
  }
}
</style>